<template>
  <div>
      <table border="1px">
          <tr>
              <td>商品名称</td>
              <td>商品价格</td>
              <td>商品数量</td>
              
          </tr>
          <tr v-for="(item,index) in tlist" :key="index">
              <td>{{item.name}}
              </td>
              <td>{{item.price}}</td>
              <td><button @click="mins(index,'+')">+</button>
              {{item.num}}
                <button @click="mins(index,'-')">-</button></td>
               
          </tr>
          
          
        
      </table>
      总数量： {{ totalCount(0) }}  总价格{{ totalCount(1) }}
  </div>
</template>

<script>
export default {
    data(){
        return{
            tlist:[{name:"话筒",price:13,num:1},{name:"音响",price:45,num:1},{name:"充电器",price:45,num:1}]

        }
    },
    methods:{
        totalCount:function(type){
            //默认数量
            let total = 1;
            let totalprice = 0;
            for(let i=0,l=this.tlist.length;i<l;i++){
                total += this.tlist[i].num;
                totalprice += (this.tlist[i].num *this.tlist[i].price)
            }
            if(type == 0){
                return total
            }else{
                return totalprice
            }
            

        },
        mins:function(index,type){
            if(type=="-"){
            if(this.tlist[index].num >0){
                this.tlist[index].num--
            }
            }
            else{
                this.tlist[index].num++

            }
            
            
       
           

            
        },
        
    }


}
</script>

<style>

</style>